<template>
	<div class="detailHeader">
		<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
			<el-row :gutter="20" >
				<el-col :span="12" v-if="dynamicType === '3'">
					<el-form-item label="抵锚时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择抵锚时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '4'">
					<el-form-item label="起锚时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择起锚时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '5'">
					<el-form-item label="靠泊时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择靠泊时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '5'">
					<el-form-item label="泊位" prop="berthId" class="top">
						<el-select 
							@change="getBittbyData"
                            v-selecttext="formData.berthNo,berthSelectData,'id'"
                            v-model="formData.berthId" filterable collapse-tags size="mini" clearable class="others">
							<el-option
								v-for="item in berthSelectData"
								:key="item.id"
								:label="item.berthNo"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '10'">
					<el-form-item label="目的泊位" prop="berthId" class="top">
						<el-select v-selecttext="formData.berthNo,berthSelectData,'id'"
						@change="getBittbyData"
						v-model="formData.berthId" filterable collapse-tags size="mini" clearable class="others">
							<el-option
								v-for="item in berthSelectData"
								:key="item.id"
								:label="item.berthNo"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
                <el-col :span="12" v-if="dynamicType === '5' || dynamicType === '10'">
					<el-form-item label="首缆" prop="bollardNoStart" class="top">
						<el-select v-model="formData.bollardNoStart" filterable collapse-tags size="mini" clearable class="others">
							<el-option
								v-for="item in bittbyData"
								:key="item.id"
								:label="item.bollardNo"
								:value="item.bollardNo"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
                <el-col :span="12" v-if="dynamicType === '5' || dynamicType === '10'">
					<el-form-item label="尾缆" prop="bollardNoEnd" class="top">
						<el-select v-model="formData.bollardNoEnd" filterable collapse-tags size="mini" clearable class="others">
							<el-option
								v-for="item in bittbyData"
								:key="item.id"
								:label="item.bollardNo"
								:value="item.bollardNo"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
                
				<el-col :span="12" v-if="dynamicType === '5' || dynamicType === '10'">
					<el-form-item label="舷靠" prop="berthType" class="top">
						<el-select v-model="formData.berthType" filterable collapse-tags size="mini" clearable class="others">
							<el-option
								v-for="item in berthTypeData"
								:key="item.id"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '10'">
					<el-form-item label="移泊时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择移泊时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
                <el-col :span="12" v-if="dynamicType === '10'">
					<el-form-item label="原泊位" prop="beforeBerthNo" class="top">
						<el-input
							v-model="formData.beforeBerthNo"
							size="mini"
							:disabled="true">
						</el-input>
					</el-form-item>
				</el-col>
                
				<el-col :span="12" v-if="dynamicType === '6'">
					<el-form-item label="开工时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择开工时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '7'">
					<el-form-item label="停工时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择停工时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
                <el-col :span="12" v-if="dynamicType === '7'">
					<el-form-item label="停工类别" prop="stopTypeCode" class="top">
						<el-select 
                            @change="stopTypeChange"
                            v-model="formData.stopTypeCode" 
							v-selecttext="formData.stopTypeName,stopTypeData,'dictValue','dictLabel'"
                            filterable collapse-tags size="mini" clearable class="others">
							<el-option
								v-for="item in stopTypeData"
								:key="item.dictValue"
								:label="item.dictLabel"
								:value="item.dictValue"
							></el-option>
						</el-select>
					</el-form-item>
				</el-col>
                <el-col :span="12" v-if="dynamicType === '7'">
					<el-form-item label="停工原因" prop="stopName" class="top">
						<el-input
							v-model="formData.stopName"
							size="mini">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '8'">
					<el-form-item label="复工时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择复工时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '9'">
					<el-form-item label="完工时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择完工时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="dynamicType === '11'">
					<el-form-item label="离泊时间" prop="dynamicTime" class="top">
						<el-date-picker
							v-model="formData.dynamicTime"
							type="datetime"
							format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm"
							size="mini"
							placeholder="请选择离泊时间"
						></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12" >
					<el-form-item label="备注" prop="remark" class="top">
						<el-input
                        size="mini"
                            placeholder="请输入备注"
                            v-model="formData.remark"
                        ></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<!-- <el-dialog
			title="货权转移附件"
			:visible.sync="openFile"
			width="30%"
			append-to-body>
			<div 
				v-for="(item,index) in fileList" :key="item.fileId" 
				@click="handlePreview(item)"
				style="cursor:pointer;margin: 5px 0;"
			>{{index + 1}}、{{item.fileName}}
			</div>
			
		</el-dialog> -->
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public'
export default {
  name: 'dynamicTracking',
  components: { BaseTable },
  props: {
    // 描述data
    descriptionsData: {
      type: Array,
      default: () => []
    },
    // 船详细信息
    shipData: {
      type: Array,
      default: () => []
    },
    // 泊位下拉框
    berthSelectData: {
      type: Array,
      default: () => []
    },
    // 点击行
    clickRow: {
      type: Object,
      default: {}
    },
    // 动态跟踪的类型
    dynamicType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeNames: ['1', '2', '3'],
      formData: { stopTypeCode: '', stopName: '', stopId: '', 'beforeBerthNo': '', 'dynamicTypeName': '', 'dynamicTypeCode': '', 'shipvoyageId': '', 'berthType': '', 'berthNo': '', 'berthId': '', 'bollardNoStart': '', 'bollardNoEnd': '', 'remark': '', 'dynamicTime': '' }, // from
      fileList: [],
      rules: {
        dynamicTime: [
          { required: true, message: '请选择动态时间', trigger: 'blur' }
        ],
        bollardNoStart: [
          { required: true, message: '请选择首缆', trigger: 'change' }
        ],
        bollardNoEnd: [
          { required: true, message: '请选择尾缆', trigger: 'change' }
        ],
        berthId: [
          { required: true, message: '请选择泊位', trigger: 'change' }
        ],
        berthNo: [
          { required: true, message: '请选择目的泊位', trigger: 'change' }
        ],
        stopTypeCode: [
          { required: true, message: '请选择停工类别', trigger: 'change' }
        ],
        stopName: [
          { required: true, message: '请选择停工原因', trigger: 'blur' }
        ]
      },
      loading: false, // 下拉框加载状态
      bittbyData: [], // 缆桩下拉框
      berthTypeData: [
        { label: '左舷', value: '左舷' },
        { label: '右舷', value: '右舷' }
      ],
      stopTypeData: [], // 停工类别
      stopReasonData: [] // 停工原因
    }
  },
  mounted() {
    this.getStopTypeData()
  },
  methods: {
    /**
     * 获取缆桩信息
     */
    async getBittbyData(i) {
      const params = { berthId: i }
      const res = await publicapi.queryBittByBerthId(params)
      this.bittbyData = res.data.data
    },
    /**
     * 获取停工类别
     */
    async getStopTypeData() {
      const res = await publicapi.getDictData('STOP_TYPE')
      this.stopTypeData = res.data.data.STOP_TYPE
      console.log('dafdasf', res);
    },
    /**
     * 停工类别修改，查看停工原因
     */
    async stopTypeChange(i) {
      const res = await publicapi.queryStopReasonByType({ stopTypeCode: i })
      this.stopReasonData = res.data.data
      console.log(res, 'reessss');
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";

/deep/ .slotTitle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-right: 10px;
}
/deep/ .my-label {
	background: rgb(237, 244, 255);
	width: 10%;
}
/deep/ .my-content {
	font-family: PingFangSC-Regular;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.85);
	padding: 12px 25px;
}
[v-cloak] {
	display: none;
}
</style>
